<template>
    <view>
        <view class="container">
            <view :class="showVip ? 'head-background-vip' : 'head-background'">
                <!-- 我的信息 -->
                <view class="user-data u-flex" @click="router('setProfile')">
                    <u-avatar :src="user.avatar" size="127" class="u-flex-shrink" mode="square"></u-avatar>
                    <view class="user-data-nickname u-flex-1">
                        <view class="username">{{ user.username }}</view>
                        <view class="user-data-cellphone" v-if="user.islogined" @click.stop="showPhoneNum = !showPhoneNum">
                            <text class="user-data-cellphone-num">{{ showPhoneNum ? user.accountPhone : user.privatePhone }}</text>
                            <view class="icon" v-show="!showPhoneNum">&#xe7aa;</view>
                            <view class="icon" v-show="showPhoneNum">&#xe7ab;</view>
                        </view>
                    </view>
                    <view class="u-padding-20" @click.stop="router('setup')"><u-image src="/static/icon/50000.png" width="40" height="40"></u-image></view>
                </view>
                <view class="sub-info">
                    <view @click="router('myWallet')" v-if="vip.hasTargetRight">
                        <view>{{ Number(vip.rebateAmount).toFixed(2) }}</view>
                        <view>钱包</view>
                    </view>
                    <view @click="router('myFavorites')">
                        <view>{{ BadgeNum.favorite }}</view>
                        <view>收藏夹</view>
                    </view>
                    <view @click="router('history')">
                        <view>{{ BadgeNum.footprint }}</view>
                        <view>足迹</view>
                    </view>
                </view>
                <!-- 会员经验 -->
                <view class="vip-process" v-show="showVip" :class="`vipBG${vip.level}`">
                    <view class="">
                        <view class="vip-name">
                            <text :style="vipNameStyle" class="o-font-500">超凡云仓会员</text>
                            <u-image src="@/static/images/V1.png" width="37" height="41" class="vip-img" v-if="vip.level === 1"></u-image>
                            <u-image src="@/static/images/V2.png" width="37" height="41" class="vip-img" v-if="vip.level === 2"></u-image>
                            <u-image src="@/static/images/V3.png" width="37" height="41" class="vip-img" v-if="vip.level === 3"></u-image>
                            <u-image src="@/static/images/V4.png" width="37" height="41" class="vip-img" v-if="vip.level === 4"></u-image>
                            <text style="font-size: 26rpx" :style="vipNameStyle" class="vip-name-t">{{ vip.name }}</text>
                        </view>
                    </view>
                    <view class="process">
                        <img-cache :src="`${global.BASE_URL_API}/file/file-view/annexFile/${vip.iconId}`" width="50" height="50" class="damend" v-if="vip.iconId" />
                        <u-line-progress :percent="(vip.currentExperience / vip.fullExperience) * 100" :show-percent="false" :activeColor="vipLevelColor" inactive-color="#FFFFFF" height="4" class="o-flex-1"></u-line-progress>
                    </view>
                    <view class="vip-tip" :style="vipNameStyle" v-show="vip.nextMemberName">还差{{ vip.lackExperience }}经验值升成为{{ vip.nextMemberName }}</view>
                    <view class="read-rights" @click="router('myRights')" :style="readRightBg">看权益</view>
                </view>
                <view class="bottom-cover" v-if="vip.level"></view>
            </view>
            <!-- 我的订单 -->
            <view class="my-order">
                <view class="u-flex u-row-between title">
                    <view class="head">我的订单</view>
                    <view class="more" @click="router('orderManager', { name: '全部' })">查看全部</view>
                </view>
                <u-grid col="4" :border="false">
                    <template v-for="(item, index) in btnList">
                        <u-grid-item>
                            <view class="items" @click="router(item.target, { name: item.name })">
                                <u-image :src="item.url" width="58" height="58"></u-image>
                                <view class="name">{{ item.name }}</view>
                                <u-badge :count="item.count" :offset="[0, 20]" bgColor="#fc4f75" class="badge"></u-badge>
                            </view>
                        </u-grid-item>
                    </template>
                </u-grid>
            </view>
            <credit-card ref="creditRef"></credit-card>
            <!-- 服务中心 -->
            <view class="service-center my-order">
                <view class="u-flex u-row-between"><view class="head">服务中心</view></view>
                <u-grid col="4" :border="false">
                    <template v-for="(item, index) in services">
                        <u-grid-item>
                            <view class="items" @click="router(item.target, { params: JSON.stringify({ index: item.index, key: item.key }) })">
                                <u-image :src="item.url" width="58" height="58"></u-image>
                                <view class="name">{{ item.name }}</view>
                                <u-badge :count="item.count" :offset="[0, 20]" bgColor="#fc4f75" class="badge"></u-badge>
                            </view>
                        </u-grid-item>
                    </template>
                </u-grid>
            </view>
            <!-- 常用功能 -->
            <view class="my-order">
                <view class="u-flex u-row-between"><view class="head">我的服务</view></view>
                <u-grid :col="col" :border="false">
                    <template v-for="(item, index) in commonFun">
                        <u-grid-item>
                            <view class="items" @click="router(item.target)">
                                <u-image :src="item.url" width="58" height="58"></u-image>
                                <view class="name">{{ item.name }}</view>
                            </view>
                        </u-grid-item>
                    </template>
                </u-grid>
            </view>
            <!-- 认证提醒 -->
            <view v-if="!user.hasAuth && !isVisitor" class="real-name-warning" @click="router('certification')">完成实名认证,更多折扣惊喜等你来 >></view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useUserStore } from '@/store'
import global from '@/config'
import creditCard from './c/credit.vue'

const userStore = useUserStore()

const showPhoneNum = ref(false)
const col = ref(4)
const btnList = ref<any>([
    {
        url: '/static/icon/10024.png',
        name: '待付款',
        count: 0,
        target: 'orderManager'
    },
    {
        url: '/static/icon/30009.png',
        name: '待发货',
        count: 0,
        target: 'orderManager'
    },
    {
        url: '/static/icon/10025.png',
        name: '待收货',
        count: 0,
        target: 'orderManager'
    },
    {
        url: '/static/icon/10027.png',
        name: '退款售后',
        count: 0,
        target: 'aftersales'
    }
])

const services = ref([
    {
        url: '/static/icon/30013.png',
        name: '账单通知',
        count: 0,
        target: 'billNoticeList'
    },
    {
        url: '/static/icon/30012.png',
        name: '交易物流',
        count: 0,
        target: 'notice',
        index: 0,
        key: 4
    },
    {
        url: '/static/icon/30010.png',
        name: '通知公告',
        count: 0,
        target: 'notice',
        index: 1,
        key: 5
    },
    {
        url: '/static/icon/30011.png',
        name: '退款通知',
        count: 0,
        target: 'notice',
        index: 2,
        key: 6
    }
])
const vip = ref<any>({
    currentExperience: 0,
    fullExperience: 1,
    hasTargetRight: false, // 是否拥有返利权益
    rebateAmount: 0,
    level: undefined
})

const BadgeNum = ref({
    favorite: 0,
    footprint: 0,
    money: 0,
    experience: 0
})

/** 是否为游客 */
const isVisitor = computed(() => {
    return userStore.userInfo?.type === 3
})

const user = computed(() => {
    let userInfo = userStore.userInfo
    let config = userStore.config
    if (!userInfo) return {}
    return {
        // 登录状态
        islogined: !userInfo.token ? false : true,
        merchantId: userInfo.merchantId,
        privatePhone: userInfo.accountPhone?.replace(/(\d{3})\d{6}(\d{2})/, '$1******$2'),
        accountPhone: userInfo.accountPhone,
        avatar: userInfo.headPicUrl,
        username: userInfo.nickname || userInfo.merchantName,
        type: userInfo.type,
        hasAuth: config?.authStatus === 4,
        accountType: userInfo.accountType
    }
})

const showVip = computed(() => {
    return [3, 4].indexOf(user.value.type) === -1 && user.value.hasAuth && vip.value.level
})

const readRightBg = computed(() => {
    let style = ''
    switch (vip.value.level) {
        case 1:
            style = 'linear-gradient(to right, #7e7d80, #d9d8db)'
            break
        case 2:
            style = 'linear-gradient(to right, #ca876e, #fcc8a4)'
            break
        case 3:
            style = 'linear-gradient(to right, #7d8cc3, #c6cde8)'
            break
        case 4:
            style = 'linear-gradient(to right, #b27d55, #f8debc)'
            break
        default:
            style = 'linear-gradient(to right, #7e7d80, #d9d8db)'
    }
    return {
        background: style
    }
})

const vipNameStyle = computed(() => {
    let style = ''
    switch (vip.value.level) {
        case 1:
            style = '#7e7d80'
            break
        case 2:
            style = '#ca876e'
            break
        case 3:
            style = '#7d8cc3'
            break
        case 4:
            style = '#b27d55'
            break
        default:
            style = '#7e7d80'
    }
    return {
        color: style
    }
})

const vipLevelColor = computed(() => {
    switch (vip.value.level) {
        case 1:
            return '#7e7d80'
        case 2:
            return '#ca876e'
        case 3:
            return '#7d8cc3'
        case 4:
            return '#b27d55'
        default:
            return '#7e7d80'
    }
})

const commonFun = computed(() => {
    let temp = [
        {
            url: '/static/icon/50009.png',
            name: '实名认证',
            target: 'certification'
        },
        {
            url: '/static/icon/50010.png',
            name: '地址管理',
            target: 'receiveAddress'
        },
        {
            url: '/static/icon/50011.png',
            name: '我的合同',
            target: 'MyContract'
        },
        {
            url: '/static/icon/50023.png',
            name: '开具发票',
            target: 'invoice'
        },
        {
            url: '/static/icon/50012.png',
            name: '服务中心',
            target: 'smartService'
        },
        {
            url: '/static/icon/50015.png',
            name: '联系客服',
            target: 'imChat'
        },
        {
            url: '/static/icon/50025.png',
            name: '意见反馈',
            target: 'feedbackHistory'
        },
        {
            url: '/static/icon/50016.png',
            name: '关于我们',
            target: 'aboutus'
        }
    ]
    // 非游客 主账号 才显示 子账号管理
    if (!isVisitor.value && user.value.accountType === 0) {
        col.value = 3
        temp.splice(-1, 0, {
            url: '/static/icon/50017.png',
            name: '子账号管理',
            target: 'accountManage'
        })
    }
    if (process.env.NODE_ENV === 'development') {
        temp.push({
            url: '/static/icon/50016.png',
            name: '测试页面',
            target: 'test'
        })
    }
    return temp
})

const creditRef = ref<any>(null)

getOrderCount();
updateVipInfo();

onMounted(()=>{
    creditRef.value.getCreditStatus()
})

function getOrderCount() {
    let para = {
        id: user.value.merchantId
    };
    uni.$u.$api.OrderApi.queryOrderCount(para).then((res:any) => {
        btnList.value[0].count = res.payment;
        btnList.value[1].count = res.shipments;
        btnList.value[2].count = res.receiving;
        btnList.value[3].count = res.afterSale;
        BadgeNum.value = {
            money: 0,
            experience: 0,
            favorite: res.favorite,
            footprint: res.footprint
        };
    });
}
function router(target: string, params?: any) {
    uni.$u.$MRouter[target].to(params)
}

function updateVipInfo() {
    uni.$u.$api.MerchantApi.currentMerchantAccountInfo({ merchantId: user.value.merchantId }).then((res: any) => {
        userStore.setNickname(res.nickname)
        userStore.setAvatar(res.headPicUrl)

        const data = res.appMemberMerchantDetailDto;
        if (data) {
            vip.value = {
                name: data.memberName,
                level: data.memberLevel, //会员等级
                currentExperience: data.currentExperience,
                fullExperience: data.fullExperience,
                iconId: data.iconId,
                lackExperience: data.lackExperience,
                nextMemberName: data.nextMemberName,
                hasTargetRight: data.rebateFlag,
                rebateAmount: data.rebateAmount
            };
            userStore.updateConfig({
                name: data.memberName,
                level: data.memberLevel
            })
        }
    });
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
    .head-background-vip {
        background-image: url(@/static/images/mine-vip.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: relative;
        min-height: 558rpx;
        padding-top: 40rpx;
    }
    .head-background {
        background-image: url(@/static/images/mine.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: relative;
        min-height: 460rpx;
        padding-top: 40rpx;
    }
    .bottom-cover {
        background-image: url(@/static/images/bottomCover.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 2;
        height: 65rpx;
    }

    .user-data {
        padding: 45rpx;
        padding-top: 44px;
        font-weight: 400;
        color: #333333;
        line-height: 60rpx;
        align-items: center;
        &-nickname {
            margin-left: 16rpx;
            padding-left: 40rpx;
            font-size: 32rpx;
            color: white;
            .username {
                min-height: 60rpx;
            }
        }
        &-cellphone {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            min-height: 60rpx;
            width: fit-content;
            &-num {
                width: 200rpx;
                font-size: 26rpx;
            }
        }
    }
    .sub-info {
        color: white;
        display: flex;
        justify-content: space-around;
        text-align: center;
    }

    .vip-process {
        min-height: 220rpx;
        margin: 20rpx 30rpx;
        background-size: 100% auto;
        background-repeat: no-repeat;
        padding: 20rpx 30rpx;
        position: relative;
        .vip-name {
            font-size: 34rpx;
            display: flex;
            align-items: center;
            &-t {
                background-color: white;
                margin-left: 10rpx;
                padding: 10rpx 14rpx;
                border-radius: 30rpx;
                font-size: 28rpx;
            }
            .vip-img {
                margin-left: 10rpx;
            }
        }
        .read-rights {
            color: white;
            border-radius: 20rpx 0 0 20rpx;
            padding: 6rpx 20rpx;
            position: absolute;
            right: 0rpx;
            top: 20rpx;
        }
        .damend {
            position: absolute;
            top: 0;
        }
        .vip-tip {
            color: #646060;
            font-size: 26rpx;
            line-height: 52rpx;
        }
        .process {
            position: relative;
            display: flex;
            align-items: center;
            padding-top: 50rpx;
        }
    }
    .vipBG1 {
        background-image: url(@/static/images/vip1.png);
    }
    .vipBG2 {
        background-image: url(@/static/images/vip2.png);
    }
    .vipBG3 {
        background-image: url(@/static/images/vip3.png);
    }
    .vipBG4 {
        background-image: url(@/static/images/vip4.png);
    }
    // 我的订单
    .my-order {
        background: $uni-bg-color;
        margin-top: 20rpx;
        padding: 20rpx;
        padding-bottom: 30rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        border-radius: 10rpx;
        .head {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
        }

        .more {
            color: #ff2442;
            background-color: #ffecee;
            padding: 0 20rpx;
            border-radius: 30rpx;
        }
        .items {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .title {
            padding-bottom: 30rpx;
        }
    }

    .badge {
        min-width: 40rpx;
        min-height: 40rpx;
    }
    // 实名认证 提醒
    .real-name-warning {
        margin-top: 20rpx;
        padding-left: 140rpx;
        text-align: center;
        background-image: url(@/static/icon/my/10007.png);
        background-size: 143rpx 116rpx;
        background-position: 30rpx 0;
        background-repeat: no-repeat;
        line-height: 116rpx;
        font-weight: bold;
        background-color: white;
    }
}
</style>
